<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../layui/css/layui.css"  media="all">
  <style>
    label.layui-form-label {
      width: 60px;
    }

    div.layui-form-item {
      margin-bottom: 0px;
    }
  </style>
</head>
<body>
<!-- 搜索表单 -->
<blockquote class="layui-elem-quote layui-quote-nm">
  <form id="search_form" class="layui-form" action="" lay-filter="search_form">
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">日报内容</label>
          <div class="layui-input-inline">
            <input type="text" name="title" placeholder="请输入" autocomplete="off" class="layui-input">
          </div>
        </div>

        <div class="layui-inline">
          <label class="layui-form-label">日期范围</label>
          <div class="layui-input-inline">
            <input type="text" name="created" id="createdDate" lay-verify="date" autocomplete="off" class="layui-input">
          </div>
        </div>
    
        <div class="layui-inline">
          <button class="layui-btn layui-btn-normal" lay-submit lay-filter="post-search">
              <i class="layui-icon">&#xe615;</i>搜索
          </button>
        </div>
      </div>
    </form>
</blockquote>

<a class="layui-btn layui-btn-sm layui-btn-normal" id="btnAdd" href="daily_form.html">添加文章</a>
<button class="layui-btn layui-btn-sm layui-btn-normal" id="btnDeleteBatch">批量删除</button>


<!-- 文章列表 -->
<table class="layui-hide" id="dailies"></table>

<script type="text/html" id="toolbar">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="remove">删除</a>
</script>

<!-- 数据表格关键字列的显示模板 -->
<script type="text/html" id="keywordsTpl">
	{{#  if(d.keyword && d.keyword.length > 0) { }}
		{{# for (var i = 0; i < d.keyword.length; i++) { }}
			<span class="layui-badge layui-bg-blue">{{d.keyword[i].name}}</span>
		{{# } }}
	{{#  } else { }}
		<span></span>
	{{#  } }} 
</script>

<script src="../layui/layui.js" charset="utf-8"></script>
 
<script>
	layui.use([ 'table', 'laydate' ], function() {
		var table = layui.table;
		var laydate = layui.laydate;

		//日期
		laydate.render({
			elem : '#createdDate',
			range : true
		});

		table.render({
			elem : '#dailies',
			url : '../dailies/list',
			cellMinWidth : 80,
			cols : [[
				// id, digest, name(用户), created,  views, keywords
				{field : 'id', width : 80, title : 'ID', sort : true }, 
				{field : 'digest', minWidth : 200, title : '摘要' }, 
				{field : 'user', width : 100, title : '用户' }, 
				{field : 'created', width : 180, title : '时间', 
					templet: '<span>{{new Date(d.created).toISOString().slice(0, 16).replace("T", " ")}}</span>'},
				{field : 'views', title : '阅读数', width : 100, align: 'center'}, 
				{field : 'keywords', title : '关键字', width: 250, templet: '#keywordsTpl'},
				{fixed: 'right', title:'操作', toolbar: '#toolbar', width:150, align: 'center'}
			]],
			page : true
		});

		var $ = layui.$;
		$('#btnAdd').on('click', function() {

		});
	});
</script>

</body>
</html>